<template>
  <div class="myCategoryGoods" v-for="item in children" :key="item.id">
    <!-- 二级分类的名字 -->
    <my-title>
      <template #center>
        <div class="title">
          <h3>- {{ item.name }} -</h3>
          <div class="tag">温暖柔软，品质之选</div>
        </div>
      </template>
      <template #button>
        <router-link class="button green" to="/"
          >查看全部<i class="left iconfont icon-xiangyoujiantou"></i
        ></router-link>
      </template>
    </my-title>
    <ul class="goods_item">
      <!-- 二级分类下的商品 -->
      <li v-for="items in item.goods" :key="items.id">
        <my-card
          :name="items.name"
          :desc="items.desc"
          :price="items.price"
          :img="items.picture"
          width="160px"
          height="160px"
          padding="20px 0px"
          nameSize="16px"
          priceSize="20px"
          descSize="14px"
          imgHeight="160px"
          namePadding="12px 30px 0"
          :to="'/product/'+items.id"
        ></my-card>
      </li>
    </ul>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
/* 引入myTitle组件 */
import myTitle from "components/communal/myTitle";
import myCard from "components/communal/myCard";
export default {
  props: {
    children: {
      type: Array,
      default: [],
    },
  },
  name: "myCategoryGoods",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({});
    return { ...toRefs(data) };
  },
  components: {
    myTitle,
    myCard,
  },
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.myCategoryGoods {
  background-color: #fff;
  margin-top: 20px;
  .title {
    position: absolute;
    left: 0;
    text-align: center;
    h3 {
      font-size: 28px;
      color: #666;
      font-weight: 400;
      text-align: center;
      line-height: 100px;
    }
    top: 0;
    width: 1240px;
    .tag {
      text-align: center;
      color: #999;
      font-size: 20px;
      position: relative;
      top: -20px;
    }
  }
  .button {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .goods_item {
    width: 1240px;
    display: flex;
    // padding: ;
    padding: 10px 70px 20px;
    justify-content: space-around;
    li {
      display: block;
      width: 220px;
      text-align: center;
      transition: all 0.5s;
    }
  }
}
</style>